.register {
    margin-bottom: 2em;
    .container {
        width: 80%;

        .title {
            position: relative;
            width: 6.5em;
            text-align-last: justify;
            margin: 0 auto;
            margin-bottom: 2em;

            p:nth-of-type(1) {
                color: #000;
                font-weight: bold;
                font-size: 1em;
            }

            p:nth-of-type(2) {
                color: #3d3d3d;
                font-size: .5em;
            }

            &:before {
                content: "";
                display: inline-block;
                height: 1px;
                width: 100%;
                border-bottom: 1px solid #9ac1c0;
                position: absolute;
                left: -120%;
                bottom: 1em;
            }

            &::after {
                content: "";
                display: inline-block;
                height: 1px;
                width: 100%;
                border-bottom: 1px solid #9ac1c0;
                position: absolute;
                right: -120%;
                bottom: 1em;
            }
        }

        .reginfo {
            p {
                text-align: center;
                font-size: 1em;
                margin-bottom: 2em;
            }

            form {
                display: flex;
                flex-direction: column;
                align-items: center;

                .username {
                    display: flex;
                    justify-content: flex-start;
                    width: 70%;
                    margin-bottom: 1em;

                    .inp {
                        flex-basis: 50%;

                        span {
                            display: inline-block;
                            width: 6em;
                            font-size: .9em;
                            text-align: left;
                        }

                        input {
                            width: 65%;
                            background: #fff;
                            border: 1px solid #9ac1c0;
                        }
                    }

                    .prom {

                        flex-basis: 50%;

                        span:nth-of-type(1) {
                            color: #ff0000;
                            text-align: start;
                        }

                        span:nth-of-type(2) {
                            color: #000;
                            font-size: .9em;
                            text-align: start;
                        }
                    }
                }

                .comname {
                    display: flex;
                    justify-content: flex-start;
                    width: 70%;
                    margin-bottom: 1em;

                    .inp {
                        flex-basis: 50%;

                        span {
                            display: inline-block;
                            width: 6em;
                            font-size: .9em;
                            text-align: left;
                        }

                        input {
                            width: 65%;
                            background: #fff;
                            border: 1px solid #9ac1c0;
                        }
                    }

                    .prom {

                        flex-basis: 50%;

                        span:nth-of-type(1) {
                            color: #ff0000;
                            text-align: start;
                        }
                    }
                }

                .password {
                    display: flex;
                    justify-content: flex-start;
                    width: 70%;
                    margin-bottom: 1em;

                    .inp {
                        flex-basis: 50%;

                        span {
                            display: inline-block;
                            width: 6em;
                            font-size: .9em;
                            text-align: left;
                        }

                        input {
                            width: 65%;
                            background: #fff;
                            border: 1px solid #9ac1c0;
                        }
                    }

                    .prom {

                        flex-basis: 50%;

                        span:nth-of-type(1) {
                            color: #ff0000;
                            text-align: start;
                        }
                    }
                }

                .morepass {
                    display: flex;
                    justify-content: flex-start;
                    width: 70%;
                    margin-bottom: 1em;

                    .inp {
                        flex-basis: 50%;

                        span {
                            display: inline-block;
                            width: 6em;
                            font-size: .9em;
                            text-align: left;
                        }

                        input {
                            width: 65%;
                            background: #fff;
                            border: 1px solid #9ac1c0;
                        }
                    }

                    .prom {

                        flex-basis: 50%;

                        span:nth-of-type(1) {
                            color: #ff0000;
                            text-align: start;
                        }
                    }
                }

                .email {
                    display: flex;
                    justify-content: flex-start;
                    width: 70%;
                    margin-bottom: 1em;

                    .inp {
                        flex-basis: 50%;

                        span {
                            display: inline-block;
                            width: 6em;
                            font-size: .9em;
                            text-align: left;
                        }

                        input {
                            width: 65%;
                            background: #fff;
                            border: 1px solid #9ac1c0;
                        }
                    }

                    .prom {

                        flex-basis: 50%;

                        span:nth-of-type(1) {
                            color: #ff0000;
                            text-align: start;
                        }

                        span:nth-of-type(2) {
                            color: #000;
                            font-size: .9em;
                            text-align: start;
                        }
                    }
                }

                .quesition {
                    display: flex;
                    justify-content: flex-start;
                    width: 70%;
                    margin-bottom: 1em;

                    .inp {
                        flex-basis: 50%;

                        span {
                            display: inline-block;
                            width: 6em;
                            font-size: .9em;
                            text-align: left;
                        }

                        select {
                            width: 65%;
                            background: #fff;
                            border: 1px solid #9ac1c0;
                        }
                    }

                    .prom {

                        flex-basis: 50%;

                        span:nth-of-type(1) {
                            color: #000;
                            font-size: .9em;
                            text-align: start;
                        }
                    }
                }

                .sex {
                    display: flex;
                    justify-content: flex-start;
                    width: 70%;
                    margin-bottom: .5em;

                    span {
                        display: inline-block;
                        width: 6em;
                        font-size: .9em;
                        text-align: left;
                    }

                    label {
                        width: 10%;
                        font-weight: normal;
                        text-align: center;
                        margin-bottom: 0;

                        input[type=radio] {
                            margin: 0;
                        }
                    }

                }

                .captcha {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    width: 70%;
                    margin-bottom: 1em;

                    span:nth-of-type(1) {
                        display: inline-block;
                        width: 6em;
                        font-size: .9em;
                        text-align: left;
                    }

                    input {
                        width: 30%;
                        background: #fff;
                        border: 1px solid #9ac1c0;
                    }

                    canvas {
                        width: 20%;
                        height: 30px;
                    }

                    span:nth-of-type(2) {
                        display: inline-block;
                        font-size: .8em;
                        text-align: left;
                    }

                    span:nth-of-type(3) {
                        display: inline-block;
                        color: #ff0000;
                        font-size: .7em;
                        text-align: left;
                    }
                }

                .agree{
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    width: 70%;
                    margin-bottom: .5em;
                    span {
                        display: inline-block;
                        width: 8em;
                        font-size: .9em;
                        text-align: left;
                    }
                    .info{
                        flex: 1;
                        .text{
                            p{
                                text-align: left;
                                margin-bottom: .2em;
                                font-size: .8em;
                            }
                            border: 1px solid #9ac1c0;
                            
                        }
                        label{
                            font-weight: normal;
                            input{
                                margin:0;
                            }
                            span{
                                width: auto;
                            }
                        }
                    }
                }

                .btn{
                    margin: 0 auto;
                    width: 20%;
                    font-weight: 600;
                    color: #eef6ff;
                    background: #6db6ff;
                    font-size: 1em;
                    padding: 4px .8em;
                    border-radius: 5px;
                }
            }
        }
    }

    @media screen and (max-width:974px) {
        .container {
            width: 90%;
        }
    }

    @media screen and (max-width:866px) {
        .container {
            width: 100%;
            padding: 0;
        }
    }

    @media screen and (max-width:768px) {
        .container {
            width: 100%;
            padding: 0;
            .reginfo{
                form{
                    .username{
                        flex-wrap: wrap;
                        .inp{
                            flex-basis: 100%;
                        }
                        .prom{
                            flex: 1;
                            span:nth-of-type(2){
                                color: #808080;
                            }
                        }
                    }
                    .comname{
                        flex-wrap: wrap;
                        .inp{
                            flex-basis: 100%;
                        }
                        .prom{
                            flex: 1;
                        }
                    }
                    .password{
                        flex-wrap: wrap;
                        .inp{
                            flex-basis: 100%;
                        }
                        .prom{
                            flex: 1;
                        }
                    }
                    .morepass{
                        flex-wrap: wrap;
                        .inp{
                            flex-basis: 100%;
                        }
                        .prom{
                            flex: 1;
                        }
                    }
                    .email{
                        flex-wrap: wrap;
                        .inp{
                            flex-basis: 100%;
                        }
                        .prom{
                            flex: 1;
                            span:nth-of-type(2){
                                color: #808080;
                            }
                        }
                    }
                    .quesition{
                        flex-wrap: wrap;
                        .inp{
                            flex-basis: 100%;
                        }
                        .prom{
                            flex: 1;
                            span:nth-of-type(1){
                                color: #808080;
                            }
                        }
                    }
                    .sex{
                        label{
                            width: 20%;
                        }
                    }
                    .captcha{
                        input{
                            width: 35%;
                        }
                        canvas{
                            width: 25%;
                        }
                        span:nth-of-type(2){
                            display: none;
                        }
                        span:nth-of-type(3){
                            display: none;
                        }
                    }
                }
                
            }
        }
    }
}